<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input表单</title>
    <!--用户注册登录 搜索 提交表单会用-->
</head>
<!--input标签
placeholder 占位符，提示用户输入内容
-->
<body>
<form action=""><!--页面文件或服务器请求路径-->
    文本框：<input type="text" placeholder="输入用户名" name="account"><br>
    密码框:<input type="password" placeholder="密码"><br>
    邮箱：<input type="email" placeholder="邮箱"><br>
    日期：<input type="date"><br>

    <!--radio单选框
    name：分组，有相同name属性值的单选匡为一组，一组只能选一个
    checked 默认选中
    -->

    单选框：
    <input type="radio" name="sex" value="男" >男
    <input type="radio" name="sex" checked value="女" >女<br>

    <!--lable标签 常用于绑定内容和表单标签的关系
    方法1：使用label标签把内容(如：文本)包裹起来
          在表单标签上添加id属性
          在label标签的for属性中设置对应id
    方法2：直接用文本内容把内容和表单标签一起包裹起来
           删除label标签中的for属性
   -->
    单选框：
    <input type="radio" name="sex" value="男" id="001"><label for="001">男</label>
    <label><input type="radio" name="sex" value="女">女</label><br>

    多选框<br>
    兴趣爱好：<input type="checkbox" value="篮球" name="hobby" checked>篮球
    <input type="checkbox" value="音乐" name="hobby">音乐
    <input type="checkbox" value="跳舞" name="hobby" checked>跳舞
    <br>

    <!--multiple 多文件选择-->
    上传文件：<input type="file" multiple><br>
    <!--select下拉菜单标签
     标签：select  下拉菜单整体
           option  下拉菜单每一项
     属性：selected 默认选中
-->
    <select name="prossion" id="" multiple size="3"><!--multiple多选 size可见选项数目  -->
        <!--option 选项
        value属性：选项标签的值  如果不填，默认就是标签的文本内容值

        -->
        <option  value="java bigdata">java大数据</option>
        <option value="web" selected>web前端</option>
        <option value="robot">机器视觉</option>
        <option>嵌入式开发</option><br>
    </select>

    <!--文本域标签
     placeholder
    -->
    <textarea cols="60px" rows="30px" p> </textarea><br>

    <!--想要按钮可以使用，需要加表单域标签  即form标签-->
    <input type="submit" value="提交一下">
    <input type="reset" value="重置一下">
    <!--普通按钮，模人无功能，配合js添加功能-->
    <input type="button" value="普通按钮"><br>
    <!--button标签-->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通</button>
    <br>


</form>
</body>
</html>